<template>
  <div class="login">
    <div class="login-header">
      <span>登录</span>
      <span class="back" @click="back"><van-icon name="arrow-left" /></span>
    </div>
    <div class="login-content">
      <div class="login-form">
        <van-form @submit="onSubmit">
          <van-field
            v-model="state.username"
            name="username"
            label=""
            placeholder="用户名"
            :rules="[
              {
                required: true,
                message: '请填写正确的用户名',
                pattern: /^[a-zA-Z0-9_-]{4,16}$/,
              },
            ]"
          />
          <van-field
            v-model="state.password"
            type="password"
            name="password"
            label=""
            placeholder="密码"
            :rules="[
              {
                required: true,
                message: '请输入6-12位密码',
                pattern: /\w{6,12}/,
              },
            ]"
          />
          <div style="margin: 16px">
            <van-button round block type="primary" native-type="submit">
              登录
            </van-button>
          </div>
        </van-form>
      </div>
      <div class="agree">
        <span>还没有账号？ 立即 </span><a href="/register">注册</a>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
export default defineComponent({
  setup() {
    const router = useRouter();
    const store = useStore();
    const state = reactive({
      username: "",
      password: "",
    });
    const onSubmit = (values: string) => {
      Login(values);
    };
    const Login = (values: any) =>
      store.dispatch({
        type: "login/login",
        values,
      });
    const back = () => {
      router.back();
    };
    return {
      back,
      state,
      onSubmit,
    };
  },
});
</script>

<style lang="stylus" scoped>
.login
  font-size .12rem
  .login-header
    position fixed
    top 0
    width 100%
    height .45rem
    line-height .45rem
    font-size .18rem
    text-align center
    z-index 100
    .back
      position absolute
      left .1rem
      top .01rem
  .login-content
    padding-top 2rem
    .login-form
      /deep/ .van-cell
        padding-left .5rem
    .agree
      font-size .15rem
      margin 0 .15rem
      padding .12rem 0
      color #888
      a
        color #1991eb
</style>
